<template>
  <fieldset>
    <legend>商品</legend>
    <h1>商品:Products</h1>
    <ul>
      <li v-for="item in productData" :key="item.id">
        <b>产品名称：{{ item.title }}</b>
        -----
        <b>价格：{{ item.price }}</b>
        -----
        <b>库存：{{ item.inventory }}</b>
        <button :disabled="item.inventory === 0" @click="addCart(item)">
          +加入购物车
        </button>
      </li>
    </ul>
  </fieldset>
</template>
<script setup>
import { useProduct } from "../../store/product/index";
import { useCart } from "../../store/carts/index";
import { storeToRefs } from "pinia";
let useProductStore = useProduct();
let useCartStore = useCart();
let { productData } = storeToRefs(useProductStore);
useProductStore.FETCH_PRODUCT();
let addCart = (item) => {
  useCartStore.ADD_CART(item);
  item.inventory--;
};
</script>
